import { FaqManager } from '@/components/faq/FaqManager';
import { getFaqData, updateFaqData } from './actions';
import { revalidatePath } from 'next/cache';
import { FaqCategory } from '@/components/faq/FaqCard';

interface Props {
    params: {
        lng: string;
    }
}

export default async function FaqManagePage(props: Props) {
    const resolvedParams = await props.params
    const lng = resolvedParams.lng
    const { data } = await getFaqData(lng);

    async function handleSave(newData: FaqCategory[]) {
        'use server';
        await updateFaqData(lng, newData);
        revalidatePath(`/${lng}/evcp/faq`);
    }

    return (
        <div className="container py-6">
            <section className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
                <div className="space-y-6 p-10 pb-16">
                    <div className="space-y-0.5">
                        <h2 className="text-2xl font-bold tracking-tight">FAQ Management</h2>
                        <p className="text-muted-foreground">
                            Manage FAQ categories and items for {lng.toUpperCase()} language.
                        </p>
                    </div>
                    <FaqManager initialData={data} onSave={handleSave} lng={lng} />
                </div>
            </section>
        </div>
    );
}